<template>
    <view class="contanier">
        <uni-easyinput
            prefixIcon="email"
            v-model="formData.email"
            :maxlength="50"
            :primaryColor="global.THEME_COLOR"
            placeholder="请输入正确格式的邮箱">
        </uni-easyinput>

        <view class="btn-wrap">
            <text class="btn" @click="handlerSave">保 存</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { inject, reactive } from "vue"

import { useUserStore } from '@/stores'

// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 手机号验证
const formData: any = reactive({
	email: userStore.profile.user?.email
})

// 保存数据
const handlerSave = async () => {
    if (!/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(formData.email)) {
        uni.showToast({
            icon: 'none',
            title: '请输入正确格式的邮箱',
        })
        return false
    }
    await userStore.modifyEmail(formData)
    uni.showToast({
        title: '修改成功',
        duration: 1000
    })
}
</script>

<style lang="scss">
.contanier {
    padding: 10rpx;
    .btn-wrap {
        padding-top: 20rpx;
        display: flex;
        justify-content: center;
        .btn {
            display: block;
            width: 700rpx;
            height: 70rpx;
            line-height: 70rpx;
            border-radius: 35rpx;
            color: #fff;
            text-align: center;
            background-color: $uni-color-primary;
        }
    }
}
</style>